import { getUrlRelateVoByShortLinkUsingGet } from '@/services/backend/shortLinkController';
import { BACKEND_HOST_LOCAL_REDIRECT } from '@/constants';
import { Avatar, Card, Divider, Modal, Tag, Tooltip, message } from 'antd';
import Search from 'antd/lib/input/Search';
import React, { useState } from 'react';
import { SUCCESS_CODE } from '@/constants/index';

const ShortLinkReduction: React.FC = () => {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [urlRelateVo, setUrlRelateVo] = useState<API.UrlTagRestore>();

  //查找长链
  const findLongLink = async (value: string) => {
    const res = await getUrlRelateVoByShortLinkUsingGet({ shortLink: value });
    if(res.code === SUCCESS_CODE){
      setUrlRelateVo(res.data);
      message.success(res.message)
      setIsModalOpen(true);
    }
  };

  const handleOk = () => {
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };

  return (
    <div>
      <Card>
        <Tooltip title="短链云的热心提醒💗">
          <span>快来使用短链云来还原短链吧</span>
        </Tooltip>
      </Card>
      <Divider />
      <Card>
        短链还原✨✨✨
        <Divider type={'horizontal'} />
        <Search
          placeholder="输入要还原的短链，禁止违规违法内容，有权禁止账号或网址还原短链接"
          allowClear
          enterButton="还原"
          size="large"
          onSearch={findLongLink}
        />
        <Modal
          title="短链接还原🌈"
          open={isModalOpen}
          onOk={handleOk}
          onCancel={handleCancel}
          width={1000}
        >
          <Card title={urlRelateVo?.title} size="small">
              <div style={{ display: 'flex', alignItems: 'center' }}>
                <Avatar
                  size={{ xs: 24, sm: 32, md: 40, lg: 64, xl: 80, xxl: 100 }}
                  src={urlRelateVo?.urlImg}
                  style={{ marginRight: '16px' }}
                />
              <div>
              <div style={{marginBottom:10}}>长链：{decodeURIComponent(urlRelateVo?.longUrl as string)}</div>
              <div style={{marginBottom:10}}>短链：{BACKEND_HOST_LOCAL_REDIRECT + urlRelateVo?.sortUrl}</div>
              <div>
                {urlRelateVo?.Tags?.map((tag) => (
                  <Tag key={tag.Id} color={tag.Color} style={{ marginBottom: 10 }}>
                    {tag.Name}
                  </Tag>
                ))}
              </div>
              </div>
            </div>
          </Card>
        </Modal>
      </Card>
    </div>
  );
};
export default ShortLinkReduction;
